<template>
  <a-button type="primary" @click="visible = true">
    添加
  </a-button>
  <ms-table
    v-model:limit="tState.limit"
    v-model:page="tState.page"
    :total="tState.total"
    :dataSource="tState.dataSource"
    :loadingTable="tState.loading"
    :columns="columns"
  />
  <ms-modal
    title="test"
    v-model:visible="visible"
  >
    <generator-form
      :formConfig="[
        { label: '姓名', name: 'name', tag: 'a-input', value: form.name },
        { label: '邮箱', name: 'email', tag: 'a-input', value: form.email }
      ]"
    />
  </ms-modal>
</template>

<script lang="ts">
import { ITableColums } from '@/typings'
import { defineComponent, reactive, toRefs } from 'vue'
import MsTable from '@/components/Table'
import useTables from '@/hooks/useTables'
import MsModal from '@/components/Modal'
import GeneratorForm from '@/components/Generator'

export default defineComponent({
  name: 'SysUser',
  components: { MsTable, MsModal, GeneratorForm },
  setup() {
    const columns: Array<ITableColums> = [
      { dataIndex: 'username', title: '用户名', slots: { customRender: 'names' } },
      { dataIndex: 'realName', title: '姓名' },
      { dataIndex: 'email', title: '邮箱' },
      { dataIndex: 'updateTime', title: '更新时间' }
    ]

    const state = reactive({
      visible: false,
      form: {},
      isAdd: false
    })

    const { state: tState } = useTables({
      api: '/sys/user/list'
    })

    return {
      ...toRefs(state),
      tState,
      columns
    }
  }
})
</script>
